<template>
	<view class="page-container">
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }" mode="aspectFill"></image>
		<u-navbar title="检验任务进度" :autoBack="false" leftIconColor="#fff" bgColor="transparent"
			:titleStyle="{ color: '#fff' }" safeAreaInsetTop placeholder @leftClick="onLeftClick"></u-navbar>

		<view class="placeholder-content">
			<text>检测任务明细</text>
		</view>
		<view class="content-wrapper" v-if="pageReady">
			<view class="content-area">
				<!-- 这里添加你的页面内容 -->
				<view class="placeholder-content">
					<text>监测任务进度页面内容</text>
				</view>
			</view>
		</view>

		<!-- 加载状态 -->
		<view v-else class="loading-container">
			<u-loading-icon mode="spinner" size="40"></u-loading-icon>
		</view>

	</view>
</template>

<script>
import { landscapePageMixin, backToAnyPage } from '@/utils/orientation-helper.js';

import navbarMixin from '@/common/navbarMixin'
export default {
	mixins: [navbarMixin],
	mixins: [landscapePageMixin],
	data() {
		return {
			tabName: 'workbench'
		}
	},
	methods: {
		onLeftClick() {
			// 使用通用方法返回 workbench 页面
			backToAnyPage('/pages/workbench/workbench');
		}
	}
}
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background: #f5f5f5;
}

.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	
	z-index: 1;
}

.content-wrapper {
	padding-top: 180rpx;
	min-height: calc(100vh - 180rpx);
}

.content-area {
	padding: 40rpx;
}

.placeholder-content {
	background: #fff;
	border-radius: 16rpx;
	padding: 60rpx;
	text-align: center;
	font-size: 32rpx;
	color: #666;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.loading-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	padding-top: 180rpx;
}
</style>
